<template>
  <div class="aside">
    <div class="aside-containter" v-for="item in iconArr" :key="item.id">
      <div
        @click="chooseIcon(item.title)"
        :class="['aside-item', 'iconfont', item.class]"
        :title="item.title"
      ></div>
    </div>
  </div>
</template>

<script>
import "../assets/styles/icon.css";
import { sideIcons } from "../map/mapconfig";
export default {
  name: "aside",
  data() {
    return {
      iconArr: sideIcons
    };
  },
  methods: {
    chooseIcon(type) {
      this.$emit("chooseIcon", type);
    }
  }
};
</script>

<style scoped>
.aside {
  position: fixed;
  top: 5%;
  left: 2%;
}
.aside-containter {
  width: 51px;
}
.aside-item {
  width: 51px;
  height: 51px;
  background: #ffffff;
  color: rgba(102, 102, 102, 0.9);
  margin: 8px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.aside-item:hover {
  cursor: pointer;
  color: #ffffff;
  background: rgba(102, 102, 102, 0.9);
}
</style>
